<!--短信登录页面-->
<template>
	<div class="login">
		<div class="login-center">
			<!--登录logo-->
			<div class="login-logo"><img src="../../assets/images/logo.png"></div>
			<!--登录信息输入-->
			<div class="login-input">
				<div class="login-input-title">
					<div>国家/地区</div>
					<div>中国（+86）</div>
				</div>
				<div class="login-input-pass">
					<input type="text" v-model="username" placeholder="请输入手机号" />
				</div>
				<div class="login-input-pass">
					<input type="text" v-model="verifyCode" placeholder="请输入验证码" />
					<span v-show="show" @click="getCode" class="login-input-span">获取验证码</span>
					<span v-show="!show" class="login-input-count">重新发送({{count}})</span>
				</div>
				<div class="login-input-bt" @click="loginCode()">登录</div>
				<div class="login-input-ft">
					<div class="login-input-message">
						<router-link to="/login">账号密码登录</router-link>
					</div>
					<div class="login-input-forget">
						<router-link to="/loginphone">新用户注册</router-link>
					</div>
				</div>
			</div>
			<!--登录方式-->
			<!-- <div class="login-mode">
				<div class="login-mode-center">
					<div class="login-mode-header">
						<div class="login-mode-hr"></div> 其他方式登录
						<div class="login-mode-hr"></div>
					</div>
					<div class="login-mode-list">
						<div class="login-mode-item">
							<img src="../../assets/images/wechat.png">
							<div class="login-mode-item-text">微信登录</div>
						</div>
						<div class="login-mode-item">
							<img src="../../assets/images/qq.png">
							<div class="login-mode-item-text">QQ登录</div>
						</div>
					</div>
				</div>
			</div> -->
		</div>
	</div>
</template>

<script>
	import * as userAPI from '@/api/user'
	export default {
		name: 'Login',
		data() {
			return {
				username: "",
				verifyCode:'',
				show: true,
				count: '',
				timer: null,
				reg: /^1[3456789]\d{9}$/
			}
		},
		methods: {
			getCode() {
				if(!this.reg.test(this.username)) {
					this.$message.warning('请输入正确的手机号');
					return;
				}
				const TIME_COUNT = 120;
				if(!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if(this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
					userAPI.getVerifyCode({
						type: '1',
						phone: this.username
					}).then((res) => {
						console.log(res, '====验证码信息====')
					}).catch((err) => {
						console.log(err, '====验证码信息获取失败====')
					})
				}
			},
			loginCode() {
				if(!this.reg.test(this.username)) {
					this.$message.warning('请输入正确的手机号');
					return;
				}
				if(!this.verifyCode) {
					this.$message.warning('请输入验证码');
					return;
				}
				var obj = {
					verifyCode:this.verifyCode,
					username:this.username
				}
				userAPI.login(obj).then((response)=>{
					const token = response.data.token;
		          	this.$cookies.set("signature",token,60*60*4);
		          	localStorage.userInfo = JSON.stringify(response.data)
		          	setTimeout(() => {
		          		this.$router.push({ 
				        		path:'/Home/Index'
				        })
		          	})
				}).catch((err)=>{
					console.log('登录失败=====>',err)
				})
			}
		}
	}
</script>
<style scoped>
	/*登录logo*/
	
	.login {
		position: absolute;
		height: 100%;
		width: 100%;
		background: #FFFFFF;
	}
	
	.login-center {
		width: 640px;
		margin: 0 auto;
	}
	
	.login-logo {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 80px;
	}
	
	.login-logo>img {
		width: 250px;
	}
	/*登录信息输入*/
	
	.login-input {
		padding: 50px 20px;
	}
	
	.login-input-title {
		border-bottom: 1px #F4F4F4 solid;
		color: #333333;
		font-size: 14px;
		width: 100%;
		display: flex;
		height: 45px;
		line-height: 45px;
		align-items: center;
		justify-content: space-between
	}
	
	.login-input-pass {
		display: flex;
		border-bottom: 1px #F4F4F4 solid;
		align-items: center
	}
	
	.login-input-pass>input {
		width: 100%;
		border: none;
		height: 45px;
		line-height: 45px;
		outline: none;
	}
	
	.login-input-pass>span {
		font-size: 0.6rem;
		color: #666666;
		width: 4rem;
		border-left: 1px #DCDCDC solid;
		padding-left: 15px;
		margin-left: 15px
	}
	.login-input-pass .login-input-span {
		font-size: 14px;
		color: #37B3FF;
		width: 100px;
		border-left: 1px #DCDCDC solid;
		padding-left: 15px;
		margin-left: 15px
	}
	.login-input-pass>span>a {
		color: #666666;
	}
	
	.login-input-bt {
		margin-top: 15px;
		text-align: center;
		width: 100%;
		height: 45px;
		line-height: 45px;
		color: #FFFFFF;
		background: #37B3FF;
		border-radius: 15px;
		font-size: 14px;
	}
	
	.login-input-bt>a {
		color: #FFFFFF;
		display: block
	}
	
	.login-input-ft {
		padding-top: 0.95rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
	}
	
	.login-input-message>a {
		color: #666666;
	}
	
	.login-input-forget>a {
		color: #666666;
	}
	/*登录方式*/
	
	.login-mode {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.login-mode-center {
		width: 50%;
		padding: 0.95rem 0;
	}
	
	.login-mode-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #bbbbbb;
		font-size: 14px;
	}
	
	.login-mode-hr {
		width: 2rem;
	}
	
	.login-mode-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.95rem 0.25rem;
	}
	
	.login-mode-item {
		width: 60px;
		text-align: center;
		color: #666666;
		font-size: 0.65rem;
	}
	
	.login-mode-item-text {
		padding: 15px 0;
	}
</style>